<li>
    <span tag="why">
        初衷&目的
    </span>
</li>
<li>
    <span tag="edit">
        如何添加或编辑一篇文章？
    </span>
</li>
<li is-open="yes">
    <span>
        特殊内容录入
    </span>
    <ul>
        <li>
            <span tag="code">
                编程代码
            </span>
        </li>
        <li>
            <span tag="formula">
                数学公式等特殊符号
            </span>
        </li>
    </ul>
</li>

<div class="cat">
    <a href="./home.html#/miss-cat" target="_blank">《由老猫的离世而引发的追忆》</a>
</div>
<style>
    .cat {
        width: 213.25px;
        height: 160px;
        background-image: url(./images/cat.webp);
        background-size: 100% auto;
        background-repeat: no-repeat;
        background-position: center center;
        position: absolute;
        right: 0;
        bottom: 20px;
        border-radius: 10px 0 0 10px;
        border: 2px solid rgb(188, 186, 186);
        border-right-width: 0;
    }

    .cat>a {
        position: absolute;
        top: -30px;
        background-color: transparent;
        outline: none;
        border: none;
        font-weight: 800;
        font-size: 14px;
        left: 0;
        cursor: pointer;
        color: black;
    }

    .cat>a:hover {
        text-decoration: underline;
    }
</style>